<script>
  init({
    title: 'Issue #283',
    desc: 'Use resetView to reset the header width(<a href="https://github.com/wenzhixin/bootstrap-table/issues/283" target="_blank">#283</a>).',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })

</script>

<style>
    .div-table {
        /*display: table;*/
        border: 1px solid #ccc;
    }

    .cell-left {
        /*display: table-cell;*/
        float: left;
        width: 80%;
    }

    .cell-right {
        /*display: table-cell;*/
        float: right;
        width: 20%;
    }
</style>

<p>
    <button class="btn btn-secondary" id="b" type="button">Larger</button>
    <button class="btn btn-secondary" id="s" type="button">Smaller</button>
</p>
<div class="div-table" id="d">
    <div class="cell-left">
        <table data-height="500" id="table"></table>
    </div>
    <div class="cell-right">
        RRR
    </div>
    <div class="clearfix"></div>
</div>

<script>
  var $table = $('#table')

  function buildTable($el, cells, rows) {
    var i
    var j
    var row
    var columns = []
    var data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: 'field' + i,
        title: 'Cell' + i
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells; j++) {
        row['field' + j] = 'Row-' + i + '-' + j
      }
      data.push(row)
    }
    $el.bootstrapTable('destroy').bootstrapTable({
      columns: columns,
      data: data
    })
  }

  function mounted() {
    buildTable($('#table'), 10, 50)

    var $d = $('#d')
    var width = $d.width()

    $('#b').click(function() {
      width += 100
      $d.css('width', width + 'px')
      $table.bootstrapTable('resetView')
    })
    $('#s').click(function() {
      width -= 100
      $d.css('width', width + 'px')
      $table.bootstrapTable('resetView')
    })
  }

</script>
